<template>
	<view class="root_box">
		<view class="service_box">
			<view class="serviceInfo_box">
				<image class="service_picture" :src="serviceDetail.goods.thumPic"></image>
				<view class="service_detail">
					<view class="service_detail_content">
						<view class="service_name">{{ serviceDetail.goods.name }}</view>
						<view class="service_info" v-if="serviceDetail.goodsSkuList && serviceDetail.goodsSkuList.length > 0">
							<view class="service_info_pets">{{ serviceDetail.goodsSkuList[0].serviceTime }}</view>
						</view>
					</view>
					<view class="service_price">
						<view>¥{{ Number(serviceDetail.goodsSkuList[0].price) }}起</view>
					</view>
				</view>
			</view>
			<view class="studio_info">
				<view class="studio_name">服务工作室</view>
				<view class="studio_content">
					<image class="studio_image" :src="studio.avatar"></image>
					<view>{{ studio.name }}</view>
				</view>
			</view>
		</view>

		<view class="service_address_box">
			<view class="service_address_label">服务地址</view>
			<view class="service_address_detail" @tap="selectAddress">
				<block v-if="addressInfo.id">
					<view class="service_address_customerInfo">
						<view class="service_address_customerName">{{ addressInfo.name }}</view>
						<view class="service_address_customerPhone">{{ addressInfo.mobile }}</view>
					</view>
					<view class="service_address">{{ addressInfo.completeAddress }}</view>
					<!-- <view class="service_address_position">距离工作室{{ studioPosition }}km</view> -->
				</block>
				<view v-if="!addressInfo.id" class="service_address">选择地址</view>
			</view>
			<uni-icons type="right" size="16"></uni-icons>
		</view>

		<view class="pet_service_box">
			<view class="pet_box" @tap="selectPets">
				<view class="pet_label">选择宠物</view>
				<view v-if="petsInfo.length > 0" class="pet_list">
					<view class="pet_item" v-for="item in petsInfo" :key="item.id">
						<image class="pet_picture" :src="item.petAvatar"></image>
						<view class="pet_name_box">
							<view class="pet_name">{{ item.petNickName }}</view>
							<view class="pet_age">{{ item.birthdayValue }}</view>
						</view>
					</view>
				</view>
				<view v-else class="pet_empty">选择宠物</view>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
			<view class="service_time_box" @tap="openServiceCalenderRef">
				<view class="service_time_label">服务日期</view>
				<view class="service_time_content">
					<view v-if="selectedServiceDateList.length < 1" class="service_tiem_status">
						<view class="service_time_empty">选择日期</view>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
					<view v-if="selectedServiceDateList.length > 0" class="service_tiem_status">
						<view class="service_time_unempty">已选{{ selectedServiceDateList.length }}天</view>
						<view class="service_time_unempty_button">
							<uni-icons type="right" size="16"></uni-icons>
						</view>
					</view>
					<view class="service_time_list">
						<view class="service_time_item" v-for="(item, index) in selectedServiceDateList" :key="index">
							{{ item.fulldate }}
						</view>
					</view>
				</view>
			</view>
			<view class="arrived_home_box">
				<view class="arrived_home_label">上门时间</view>
				<view class="arrived_home_content">
					<view class="arrived_home_status" @tap="openPickerTimePopupRef">
						<view v-if="!arrivedHomeTime.startTime" class="arrived_home_empty">选择上门时间（可不选）</view>
						<view v-else class="arrived_home_time">
							{{ arrivedHomeTimeText }}
						</view>
						<uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view v-if="extraServiceList.length > 0 && selectedExtraServiceListByStore.length == 0" class="value-added-service" @tap="toExtraService">
			<view class="service-header">
				<view class="title">顺手下单增值服务</view>
				<view class="select-link">
					去选择
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>
			<scroll-view scroll-x="true" class="service-list">
				<view class="service-wapper">
					<view class="service-item" v-for="(service, index) in extraServiceList" :key="index">
						<image :src="service.goods.thumPic" class="service-image" />
						<view class="service-info">
							<view class="service-name">{{ service.goods.name }}</view>
							<view class="service-price">¥{{ service.goodsSkuList[0].price }}/次</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view v-if="selectedExtraServiceListByStore.length > 0" class="ordered-services">
			<!-- 头部 -->
			<view class="ordered-services__header">
				<view class="ordered-services__title">已下单增值服务</view>
				<view class="ordered-services__cancel" @tap="handleCancelExtraService">
					取消增值服务
					<uni-icons type="right" size="16"></uni-icons>
				</view>
			</view>

			<!-- 服务列表 -->
			<view class="ordered-services__list">
				<!-- 服务项目 -->
				<view class="service-item" v-for="(item, index) in selectedExtraServiceListByStore" :key="index">
					<view class="service-main">
						<image class="service-image" :src="item.goods.thumPic" mode="aspectFill" />
						<view class="service-content">
							<view class="service-header">
								<view class="service-name">{{ item.goods.name }}</view>
								<view class="total-price">¥{{ item.goodsSkuList[0].price }}</view>
							</view>
							<view class="service-footer">
								<view class="service-price">¥{{ item.goodsSkuList[0].price }}/次</view>
								<view class="service-count">共{{ computedServiceCount(item.config) }}次</view>
							</view>
						</view>
					</view>
					<view class="service-dates" v-if="item.config.length > 0">
						<template class="service-date" v-for="(config, index) in item.config" :key="index">
							<text v-if="config.petId" class="service-date-name">{{ config.petNickName }}</text>
							<text v-if="config.petId && config.date">-</text>
							<text v-if="config.date" class="service-date-date">{{ config.date }}</text>
							<view class="service-divider-line"></view>
						</template>
					</view>
				</view>
			</view>
			<view class="ordered-services__footer" @tap="toExtraService">
				<view>修改增值服务</view>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>

		<view class="common_box_merge">
			<view class="common_box" @tap="toGetKey">
				<view class="common_label">钥匙交接</view>
				<view v-if="getKeyInfo.keyMethodsId == undefined" class="common_empty">请选择</view>
				<view v-else class="common_input">{{ getKeyMothdName(getKeyInfo.keyMethodsId) }} | {{ getKeyMothdName(returnKeyInfo.keyMethodsId) }}</view>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
			<view class="common_box" @tap="toSelectWaiter">
				<view class="common_label">期望陪宠师</view>
				<view v-if="!petTeacherInfo.id" class="common_empty">请选择</view>
				<view v-else class="waiter_box">
					<view class="waiter_info">
						<image :src="petTeacherInfo.avatar" class="waiter_avatar" />
						<view class="waiter_name">{{ petTeacherInfo.nickName }}</view>
					</view>
					<view class="waiter_tips">期望陪宠师无法接单时将会派单给其他人</view>
				</view>
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>

		<view class="service_remarks_box" @tap="toServiceDemand">
			<view class="service_remarks_label">其它叮嘱</view>
			<view v-if="serviceDemandList.length < 1" class="service_remarks_empty">设置宠物粮、饮用水等其它信息</view>
			<view v-else class="service_remarks_input">已设置</view>
			<uni-icons type="right" size="16"></uni-icons>
		</view>

		<view class="order_detail_box">
			<view class="order_detail_item">
				<view class="item_label">基础服务费</view>
				<view class="item_content">{{ Number(orderUnitPrice.base_amount || 0) }}</view>
			</view>
			<view class="order_detail_item" v-if="orderUnitPrice.count_amount">
				<view class="item_label">多宠加价费</view>
				<view class="item_content">{{ Number(orderUnitPrice.count_amount || 0) }}</view>
			</view>
			<view class="order_detail_item" v-if="selectedExtraServiceListByStore.length > 0">
				<view class="item_label">增值服务费</view>
				<view class="item_content">{{ Number(orderUnitPrice.ext_service_amount || 0) }}</view>
			</view>
			<view class="order_sum order_detail_item">
				<view class="item_label">订单总计：</view>
				<view class="item_content">¥{{ Number(orderUnitPrice.total_amount || 0) }}</view>
			</view>
		</view>

		<view class="footer_box" :style="`z-index: ${feePopupState ? 999 : 0}`">
			<view class="footer_content">
				<view>
					合计:
					<text class="footer_price">¥{{ Number(orderUnitPrice.total_amount || 0) }}</text>
				</view>
				<view class="footer_fee" @tap="controlFeeDetailPopup">
					费用明细
					<uni-icons v-show="!feePopupState" type="up" size="12"></uni-icons>
					<uni-icons v-show="feePopupState" type="down" size="12"></uni-icons>
				</view>
			</view>
			<view class="footer_button" @tap="submitOrder">确认下单</view>
		</view>
		<feeDetailPopup ref="feeDetailPopupRef" :orderData="orderData" @change="getFeeDetailPopupStatus"></feeDetailPopup>
		<paymentPopup ref="paymentPopupRef" @confirm="paymentCompleted" @cancel="failToPay" @fail="failToPay"></paymentPopup>
		<realIdentityPopup ref="realIdentityPopupRef"></realIdentityPopup>
		<serviceCalender class="serviceCalender" ref="serviceCalenderRef" @confirm="getServiceDate"></serviceCalender>
		<pickerTimePopup class="pickerTimePopup" ref="pickerTimePopupRef" @confirm="getArrivedHomeTime"></pickerTimePopup>
	</view>
</template>

<script setup>
import feeDetailPopup from '@/pages/payment/order/components/feeDetailPopup.vue';
import realIdentityPopup from '@/pages/payment/order/components/realIdentityPopup.vue';
import serviceCalender from '@/pages/payment/order/components/serviceCalender.vue';
import pickerTimePopup from '@/pages/payment/order/components/pickerTimePopup.vue';
import { ref, watch, computed } from 'vue';
import api from '@/api';
import { onLoad, onShow } from '@dcloudio/uni-app';
import BigNumber from 'bignumber.js';
import { payment } from '@/hooks/usePay/index.ts';
import { useUserStoreToRefs } from '@/store/useUserStore';
import { useOrderStoreToRefs, resetUseOrderStore } from '@/store/useOrderStore';
const { petsInfo, addressInfo, getKeyInfo, returnKeyInfo, serviceDemandList, serviceDateList, selectedExtraServiceListByStore, petTeacherInfo } = useOrderStoreToRefs();
const { shareRefereeId, shareStudioId } = useUserStoreToRefs();
let studioId = '';
let waiterId = '';
const studio = ref({});
const feeDetailPopupRef = ref();
const paymentPopupRef = ref();
const realIdentityPopupRef = ref();
const serviceCalenderRef = ref();
const pickerTimePopupRef = ref();
const feePopupState = ref(false);
const selectedServiceDateList = ref([]);
const arrivedHomeTime = ref({});
const orderId = ref();
const serviceDetail = ref({
	goods: {},
	goodsSkuList: [{}],
	studioGoods: {
		petRangeMarkUp: {},
		petNumMarkUp: {}
	}
});
const query = ref({});
const studioPosition = ref(0);
const orderUnitPrice = ref({});
const extraServiceList = ref([]);

const formData = computed(() => {
	return {
		addressInfo: addressInfo.value,
		petsInfo: petsInfo.value,
		selectedServiceDateList: selectedServiceDateList.value,
		selectedExtraServiceListByStore: selectedExtraServiceListByStore.value
	};
});

const datesAndPetsInfo = computed(() => {
	return {
		petsInfo: petsInfo.value,
		selectedServiceDateList: selectedServiceDateList.value
	};
});

const feeData = computed(() => {
	let basicFee = 0;
	let extraPositionFee = 0;
	let extraPetFee = 0;
	let sum = 0;
	const serviceCount = selectedServiceDateList.value.length;

	basicFee = new BigNumber(orderUnitPrice.value.base_amount || 0).times(serviceCount).toFixed(2);
	extraPositionFee = new BigNumber(orderUnitPrice.value.distance_amount || 0).times(serviceCount).toFixed(2);
	extraPetFee = new BigNumber(orderUnitPrice.value.count_amount || 0).times(serviceCount).toFixed(2);
	sum = new BigNumber(basicFee).plus(extraPositionFee).plus(extraPetFee).toNumber();

	return {
		basicFee: Number(basicFee),
		extraPositionFee: Number(extraPositionFee),
		extraPetFee: Number(extraPetFee),
		sum: Number(sum)
	};
});

const orderData = computed(() => {
	return {
		serviceDetail: serviceDetail.value,
		feeData: feeData.value,
		orderUnitPrice: orderUnitPrice.value,
		selectedServiceDateList: selectedServiceDateList.value,
		studioPosition: studioPosition.value,
		petsInfo: petsInfo.value
	};
});

const arrivedHomeTimeText = computed(() => {
	if (arrivedHomeTime.value.startTime == '00:00') {
		return '无时间段要求';
	} else {
		return `${arrivedHomeTime.value.startTime} - ${arrivedHomeTime.value.endTime}`;
	}
});

onLoad((data) => {
	// 清除缓存
	// addressInfo.value = {};
	// petsInfo.value = [];
	resetUseOrderStore();

	waiterId = data.waiterId == 'undefined' ? '' : data.waiterId;
	studioId = data.studioId;
	query.value.studioGoodsId = data.studioGoodsId;
	query.value.skuId = data.skuId;
	submitOrder = preventRepeat(submitOrder);

	getDefaultAddress();
	getStudioInfo();
	getLastOrder()
	if (waiterId) {
		getWaiterInfo();
	}
});
onShow(() => {
	getServiceInfo();
});

watch(addressInfo, (newValue) => {
	if (newValue.id) {
		getStudioPosition();
	}
});
watch(formData, (newValue) => {
	if (newValue.addressInfo.id && newValue.petsInfo.length > 0 && newValue.selectedServiceDateList.length > 0) {
		getOrderUnitPrice();
	} else {
		orderUnitPrice.value = {};
	}
});

watch(datesAndPetsInfo, () => {
	handleCancelExtraService();
});

const getLastOrder = async () => {
	const { data } = await api({
		method: 'get',
		url: `/mall/order/getUserLastOrder`,
	});
	
	getKeyInfo.value = {
		keyMethodsId: data.handoverType,
		content: data.handoverRemarks,
	}
	returnKeyInfo.value = {
		keyMethodsId: data.returnType,
		content: data.returnRemarks,
	}
	try {
		serviceDemandList.value = JSON.parse(remarks)
	} catch (error) {
		serviceDemandList.value = []
	}
}

const getWaiterInfo = async () => {
	const { data } = await api({
		method: 'get',
		url: `/mall/studio/petsitter-team/getUserDetail`,
		data: {
			studioId: studioId,
			userId: waiterId
		}
	});
	petTeacherInfo.value = data.user || {};
};

const getStudioInfo = async () => {
	const res = await api({
		method: 'get',
		url: `/mall/studio/getStudioDetail/${studioId}`
	});
	studio.value = res.data || {};
};

const getServiceInfo = async () => {
	const { data } = await api({
		method: 'get',
		url: `/mall/goods/studio-goods/info/v2`,
		data: { id: query.value.studioGoodsId }
	});
	data.goodsSkuList = data.goodsSkuList.filter((item) => item.id == query.value.skuId);
	serviceDetail.value = data || {};
	extraServiceList.value = data?.addServiceList || [];
};

let submitOrder = async () => {
	if (validateOrderInfoIsEmpty()) return;

	const petList = petsInfo.value.map((item) => item.id);
	const petIds = petList.join(',');

	const serviceTimeSlot = selectedServiceDateList.value.map((item) => {
		const startTime = arrivedHomeTime.value.startTime || '00:00';
		const endTime = arrivedHomeTime.value.endTime || '00:00';
		return `${item.fulldate} ${startTime}:00,${item.fulldate} ${endTime}:00`;
	});
	const params = {
		studioId: studioId,
		skuId: query.value.skuId, //42
		addressId: addressInfo.value.id, // 10001
		petIds,
		serviceTimeSlot,
		doorTime: arrivedHomeTime.value ? `${arrivedHomeTime.value.startTime || '00:00'}~${arrivedHomeTime.value.endTime || '00:00'}` : '',
		handoverType: getKeyInfo.value.keyMethodsId,
		handoverRemarks: getKeyInfo.value.content,
		returnType: returnKeyInfo.value.keyMethodsId,
		returnRemarks: returnKeyInfo.value.content,
		remarks: serviceDemandList.value,
		petsitterUserId: petTeacherInfo.value.id || waiterId, // petsitterUserId 陪宠师id
		extSkuList: formatExtraServiceList()
	};
	if (shareRefereeId.value) params.promotionUserId = shareRefereeId.value; //推广人id
	const res = await api({
		method: 'POST',
		url: `/mall/order/creat`,
		data: params
	});
	if (res.code == 0) {
		orderId.value = res.data;
		uni.showModal({
			title: `提示`,
			content: `已下单成功，是否确认付款？`,
			cancelText: '暂不付款',
			confirmText: '确认付款',
			success: async (status) => {
				if (status.cancel) {
					uni.redirectTo({
						url: `/pages/petsOrder/petsList/index?orderStatus=0`
					});
					return;
				}
				toPay();
			}
		});
		return;
	} else {
		uni.showToast({
			icon: 'fail',
			title: res.msg || ''
		});
	}
	return;
};

const toPay = async () => {
	if (feePopupState.value) controlFeeDetailPopup();

	// #ifndef MP-TOUTIAO
	paymentPopupRef.value.open({
		orderId: orderId.value,
		payAmount: orderUnitPrice.value.total_amount,
		payBusinessType: 1,
		checkOrderType: 'petsService'
	});
	// #endif

	// #ifdef MP-TOUTIAO
	const isSuccessed = await payment({
		orderId: orderId.value,
		payBusinessType: 1,
		payType: 1,
		amount: orderUnitPrice.value.total_amount
	});
	if (isSuccessed) {
		uni.showToast({
			title: '支付成功'
		});
		uni.redirectTo({
			url: `/pages/payment/successfulPayment/index?orderId=${orderId.value}`
		});
	} else {
		uni.showToast({
			title: '支付失败'
		});
		uni.redirectTo({
			url: `/pages/petsOrder/petsList/index?orderStatus=0`
		});
	}

	// 清除缓存
	// addressInfo.value = {};
	// petsInfo.value = [];
	resetUseOrderStore();
	// #endif
};
const paymentCompleted = async (data) => {
	// 清除缓存
	// addressInfo.value = {};
	// petsInfo.value = [];
	resetUseOrderStore();
	uni.redirectTo({
		url: `/pages/payment/successfulPayment/index?orderId=${data.orderId}`
	});
};
const failToPay = () => {
	uni.showToast({
		title: '支付失败'
	});
	uni.redirectTo({
		url: `/pages/petsOrder/petsList/index?orderStatus=0`
	});
};
const validateOrderInfoIsEmpty = () => {
	let msg = '';
	if (!addressInfo.value.id) {
		msg = '请填写服务地址';
	} else if (petsInfo.value.length < 1) {
		msg = '请选择宠物';
	} else if (selectedServiceDateList.value.length < 1) {
		msg = '请填写服务日期';
	}
	if (msg) {
		uni.showToast({
			icon: 'none',
			title: msg
		});
		return true;
	} else {
		return false;
	}
};

//获取经纬度
const getLocation = async () => {
	return new Promise((resolve, reject) => {
		uni.getLocation({
			type: 'gcj02',
			success: function (res) {
				resolve(res);
			},
			fail() {
				resolve(false);
			}
		});
	});
};

const getStudioPosition = async () => {
	const { data } = await api({
		method: 'get',
		url: `/mall/studio/calcDistance`,
		data: {
			studioId: studioId,
			addressId: addressInfo.value.id
		}
	});
	// 返回的单位为米，需要转换成km
	studioPosition.value = Number(new BigNumber(data || 0).div(1000).toFixed(2));
};

const getOrderUnitPrice = async () => {
	const petList = petsInfo.value.map((item) => item.id);
	const petIds = petList.join(',');
	const serviceTimeSlot = selectedServiceDateList.value.map((item) => {
		const startTime = arrivedHomeTime.value.startTime || '00:00';
		const endTime = arrivedHomeTime.value.endTime || '00:00';
		return `${item.fulldate} ${startTime}:00,${item.fulldate} ${endTime}:00`;
	});
	const { data } = await api({
		method: 'POST',
		url: `/mall/order/calcPrice`,
		data: {
			studioId: studioId,
			skuId: query.value.skuId,
			addressId: addressInfo.value.id,
			petIds,
			extSkuList: formatExtraServiceList(),
			serviceTimeSlot
		}
	});
	orderUnitPrice.value = data || {};
};

const getServiceDate = (data) => {
	selectedServiceDateList.value = data.map((item) => ({
		fulldate: item.date,
		time: {
			startTime: '00:00',
			endTime: '00:00'
		}
	}));

	selectedServiceDateList.value = selectedServiceDateList.value.sort((a, b) => {
		return Date.parse(a.fulldate) - Date.parse(b.fulldate);
	});

	serviceDateList.value = selectedServiceDateList.value;
};

const getArrivedHomeTime = (data) => {
	// type 1 已选择时间，2 无时间要求
	// data = {startTime: "06:00", endTime: "22:00", type: 1}
	// data = {type: 2} 无时间要求
	if (data?.type == 2) {
		data = {
			startTime: '00:00',
			endTime: '00:00',
			type: 2
		};
	}
	arrivedHomeTime.value = data;
};

const getDefaultAddress = async () => {
	const { data } = await api({
		method: 'get',
		url: `/mall/users-addr/getDefault`
	});
	addressInfo.value = data || {};
};

const selectPets = () => {
	// 服务类型：1-上门喂养，2-上门遛狗，3-基础清洁
	const goodsType = serviceDetail.value.goods.goodsType;
	// 0-猫猫,1-狗狗,2-其他宠物
	const petType = goodsType == 2 ? 1 : '';
	uni.navigateTo({
		url: `/pages/petList/index/index?select=true&type=${petType}`
	});
};
const selectAddress = () => {
	uni.navigateTo({
		url: '/pages/addressManagement/addressList/index?select=true'
	});
};

const controlFeeDetailPopup = () => {
	feeDetailPopupRef.value.popupSwitch();
};

const getFeeDetailPopupStatus = (status) => {
	if (!status) {
		setTimeout(() => {
			feePopupState.value = status;
		}, 300);
	} else {
		feePopupState.value = status;
	}
};

const openServiceCalenderRef = () => {
	serviceCalenderRef.value.open(selectedServiceDateList.value);
};

const openPickerTimePopupRef = () => {
	pickerTimePopupRef.value.open();
};

const handleCancelExtraService = () => {
	selectedExtraServiceListByStore.value = [];
};

const formatExtraServiceList = () => {
	if (selectedExtraServiceListByStore.value.length == 0) return [];
	const formatList = selectedExtraServiceListByStore.value.map((item) => {
		const { skuId, config } = item;
		if (config.length > 0) {
			// 将config中同一天的配置合并
			const dateList = [];
			config.forEach((configItem) => {
				const { date, petId } = configItem;
				const findItem = dateList.find((dateItem) => dateItem.date == date);
				if (!findItem) {
					dateList.push({
						date: date,
						petId: petId
					});
				} else {
					findItem.petId += `,${petId}`;
				}
			});
			item.dateList = dateList;
		}
		return item;
	});
	// 每个日期生成一个增值服务配置
	const resultList = [];
	formatList.forEach((item) => {
		if (item && item.dateList && item.dateList.length > 0) {
			item.dateList.forEach((dateItem) => {
				resultList.push({
					skuId: item.goodsSkuList[0].id,
					petIds: dateItem.petId,
					date: dateItem.date
				});
			});
		} else {
			resultList.push({
				skuId: item.goodsSkuList[0].id,
				petIds: '',
				date: ''
			});
		}
	});
	return resultList;
};

// 计算服务次数，按天算，不按宠物算
const computedServiceCount = (data) => {
	const list = data.filter((item) => item.date);
	return list.length || 1;
};

const toServiceDemand = () => {
	uni.navigateTo({
		url: `/pages/payment/serviceDemand/index?isDog=${serviceDetail.value.goods.goodsType == 2}`
	});
};

const toGetKey = () => {
	uni.navigateTo({
		url: '/pages/payment/getKey/index'
	});
};

const toExtraService = () => {
	let msg = '';
	if (petsInfo.value.length < 1) {
		msg = '请选择宠物';
	} else if (selectedServiceDateList.value.length < 1) {
		msg = '请填写服务日期';
	}
	if (msg) {
		uni.showToast({
			icon: 'none',
			title: msg
		});
		return true;
	}
	uni.navigateTo({
		url: '/pages/payment/extraService/index?goodsId=' + query.value.studioGoodsId
	});
};

const toSelectWaiter = () => {
	uni.navigateTo({
		url: `/pages/applyPetTeacher/choosePetTeacher/choosePetTeacher?studioId=${studioId}&serviceType=${serviceDetail.value.goods.goodsType}`
	});
};

// 防止异步函数执行过程中，重复执行
// 传入的函数必须是promise或者是async函数并决策，
const preventRepeat = (fn) => {
	let isDoing = false;
	return async function () {
		if (isDoing) return;
		isDoing = true;
		// try catch 防止promise抛出错误
		try {
			// 防止this劫持
			await fn.apply(this, arguments);
		} catch (e) {
		} finally {
			// 加定时器是因为接口请求完后到弹窗遮罩出来之前，有一瞬间可以触发点击事件
			setTimeout(() => {
				isDoing = false;
			}, 1000);
		}
	};
};

const getKeyMothdName = (id) => {
	// 交接方式: 0-有人在家;1-密码;2-丰巢存件;3-其他; 4-面交; 5-快递; 6-闪送; 7-放在指定位置;
	const getKeysMethods = [
		{ id: 0, name: '有人在家' },
		{ id: 1, name: '密码' },
		{ id: 2, name: '丰巢存件' },
		{ id: 4, name: '面交' },
		{ id: 5, name: '快递' },
		{ id: 6, name: '闪送' },
		{ id: 7, name: '放在指定位置' },
		{ id: 3, name: '其他' }
	];
	const result = getKeysMethods.find((item) => item.id == id) || {};
	return result.name;
};
</script>

<style lang="scss" scoped>
.root_box {
	background-color: #f9f6f6;
	padding: 26rpx 32rpx;
	box-sizing: border-box;
	padding-bottom: 152rpx;
	padding-bottom: calc(152rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(152rpx + env(safe-area-inset-bottom));
	line-height: 1;
}

.service_box {
	padding: 32rpx 24rpx;
	background: #ffffff;
	border-radius: 24rpx;

	.workshop_box {
		display: flex;
		justify-content: space-between;
		padding-bottom: 32rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.workshopInfo_box {
			display: flex;
			align-items: center;

			.workshop_picture {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				margin-right: 16rpx;
			}

			.workshop_detail {
				.workshop_name {
					color: #1a1a1a;
					font-size: 32rpx;
					font-weight: bold;
				}

				.workshop_position {
					color: #808080;
					font-size: 24rpx;
				}

				.workshop_position_number {
					color: #ff6084;
				}
			}
		}

		.rules_box {
			font-size: 24rpx;
			color: #6363ff;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			text-decoration-line: underline;
			text-transform: none;
		}
	}

	.serviceInfo_box {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;

		.service_picture {
			width: 162rpx;
			height: 162rpx;
			border-radius: 24rpx;
			margin-right: 16rpx;
		}

		.service_detail {
			flex: 1;
			height: 162rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;

			.service_detail_content {
				.service_name {
					font-size: 32rpx;
					color: #1a1a1a;
					font-weight: bold;
				}

				.service_info {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #808080;

					.service_info_position {
						margin-bottom: 8rpx;
					}
				}
			}

			.service_price {
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
				color: #1b2120;
				font-weight: bold;

				.service_time {
				}
			}
		}
	}

	.studio_info {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		border-top: 1rpx solid #e6e6e6;

		.studio_name {
			width: 176rpx;
			font-weight: bold;
			font-size: 30rpx;
			color: #1a1a1a;
		}

		.studio_content {
			display: flex;
			align-items: center;
			font-weight: 400;
			font-size: 30rpx;

			.studio_image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-right: 16rpx;
			}
		}
	}

	.studio_info:last-child {
		padding-bottom: 0;
	}
}

.service_address_box {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 24rpx;
	margin-top: 24rpx;
	padding: 32rpx 24rpx;

	.service_address_label {
		color: #1a1a1a;
		font-size: 30rpx;
		font-weight: bold;
		width: 160rpx;
		margin-right: 16rpx;
	}

	.service_address_detail {
		flex: 1;
		margin-right: 10rpx;

		.service_address_customerInfo {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.service_address_customerName {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 24rpx;
			}

			.service_address_customerPhone {
				font-size: 30rpx;
			}
		}

		.service_address {
			color: #7c807f;
			font-size: 30rpx;
			line-height: 1.4;
		}

		.service_address_position {
			font-size: 24rpx;
			color: #6363ff;
			margin-top: 24rpx;
		}
	}
}

.pet_service_box {
	background-color: #ffffff;
	border-radius: 24rpx;
	margin-top: 24rpx;
	padding: 32rpx 24rpx;

	.pet_box {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.pet_label {
			color: #1a1a1a;
			font-size: 30rpx;
			font-weight: bold;
			width: 160rpx;
			margin-right: 16rpx;
		}

		.pet_empty {
			flex: 1;
			margin-right: 10rpx;
			color: #7c807f;
			font-size: 30rpx;
		}

		.pet_list {
			flex: 1;

			.pet_item {
				display: flex;
				align-items: center;
				position: relative;
				margin-bottom: 24rpx;

				.pet_picture {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}

				.pet_name_box {
					flex: 1;
					display: flex;
					align-items: center;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
					white-space: nowrap;

					.pet_name {
						box-sizing: border-box;
						font-size: 30rpx;
						color: #1b2120;
					}

					.pet_age {
						min-width: 35%;
						padding-left: 8rpx;
						margin-left: 8rpx;
						border-left: 1rpx solid #cacccc;
						font-size: 26rpx;
						color: #5c5e5e;
					}
				}
			}

			.pet_item:last-child {
				margin-bottom: 0rpx;
			}
		}
	}

	.service_time_box {
		display: flex;
		margin-top: 40rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #e6e6e6;

		.service_time_label {
			height: 30rpx;
			line-height: 30rpx;
			color: #1a1a1a;
			font-size: 30rpx;
			font-weight: bold;
			width: 160rpx;
			margin-right: 16rpx;
		}

		.service_time_content {
			flex: 1;

			.service_tiem_status {
				height: 30rpx;
				line-height: 30rpx;
				display: flex;
				align-items: center;

				.service_time_empty {
					flex: 1;
					margin-right: 10rpx;
					color: #7c807f;
					font-size: 30rpx;
				}

				.service_time_unempty {
					flex: 1;
					margin-right: 10rpx;
					color: #1b2120;
					font-size: 28rpx;
				}

				.service_time_unempty_button {
					display: flex;
					align-items: center;
					color: #7c807f;
					font-size: 28rpx;
				}
			}

			.service_time_list {
				display: grid;
				// 两列，左右间隔40rpx，上下间隔24rpx
				grid-template-columns: repeat(2, 1fr);
				grid-column-gap: 40rpx;
				grid-row-gap: 24rpx;
				padding-top: 40rpx;

				.service_time_item {
					color: #1b2120;
					font-size: 28rpx;
				}
			}

			.service_time_list:empty {
				padding-top: 0;
			}
		}
	}

	.arrived_home_box {
		display: flex;
		margin-top: 40rpx;

		.arrived_home_label {
			height: 30rpx;
			line-height: 30rpx;
			color: #1a1a1a;
			font-size: 30rpx;
			font-weight: bold;
			width: 160rpx;
			margin-right: 16rpx;
		}

		.arrived_home_content {
			flex: 1;

			.arrived_home_status {
				display: flex;
				align-items: center;

				.arrived_home_time {
					flex: 1;
					margin-right: 10rpx;
					color: #1b2120;
					font-size: 30rpx;
				}

				.arrived_home_empty {
					flex: 1;
					margin-right: 10rpx;
					color: #7c807f;
					font-size: 30rpx;
				}
			}
		}
	}
}

.service_remarks_box {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 24rpx;
	margin-top: 24rpx;
	padding: 32rpx 24rpx;

	.service_remarks_label {
		color: #1a1a1a;
		font-size: 30rpx;
		font-weight: bold;
		width: 160rpx;
		margin-right: 16rpx;
	}

	.service_remarks_empty {
		flex: 1;
		font-size: 30rpx;
		color: #7c807f;
	}

	.service_remarks_input {
		flex: 1;
		margin-right: 10rpx;
		color: #1b2120;
		font-size: 30rpx;
		line-height: 1.4;
		text-align: left;
	}
}

.common_box_merge {
	background-color: #ffffff;
	border-radius: 24rpx;
	overflow: hidden;
	margin-top: 24rpx;
	padding: 32rpx 24rpx;

	.common_box {
		border-bottom: 1rpx solid #e6e6e6;
		border-radius: 0;
		padding: 32rpx 0;
	}
	.common_box:first-child {
		padding-top: 0;
	}
	.common_box:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}
}

.common_box {
	display: flex;
	align-items: center;
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 32rpx 24rpx;

	.common_label {
		color: #1a1a1a;
		font-size: 30rpx;
		font-weight: bold;
		width: 160rpx;
		margin-right: 16rpx;
	}

	.common_empty {
		flex: 1;
		font-size: 30rpx;
		color: #7c807f;
	}

	.common_input {
		flex: 1;
		margin-right: 10rpx;
		color: #1b2120;
		font-size: 30rpx;
		line-height: 1.4;
		text-align: left;
	}
}

.get_keys_box {
	margin-top: 24rpx;
	padding: 32rpx 24rpx;
	background: #ffffff;
	border-radius: 24rpx;

	.get_keys_label {
		font-size: 30rpx;
		font-weight: bold;
		color: #1a1a1a;
		margin-bottom: 16rpx;
	}

	.get_keys_tips {
		font-size: 28rpx;
		color: #7c807f;
		padding-bottom: 40rpx;
		border-bottom: 1rpx solid #e6e6e6;
	}

	.get_keys_methods {
		margin-top: 40rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-row-gap: 24rpx;
		grid-column-gap: 16rpx;

		.get_keys_methods_item {
			height: 70rpx;
			background: #ffffff;
			border-radius: 8rpx;
			font-size: 30rpx;
			color: #5c5e5e;
			border: 1rpx solid #cacccc;
			line-height: 70rpx;
			text-align: center;
		}

		.get_keys_methods_item_pick {
			color: #ff6084;
			border: 1rpx solid #ff6084;
		}
	}
}

.order_detail_box {
	margin-top: 24rpx;
	padding: 32rpx 24rpx;
	background: #ffffff;
	border-radius: 24rpx;

	.order_detail_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;

		.item_label {
			font-size: 28rpx;
			color: #5c5e5e;
		}

		.item_content {
			font-size: 28rpx;
		}
	}

	.order_sum {
		padding-top: 30rpx;
		border-top: 1rpx solid #e4e6e6;
		font-weight: bold;
		margin-bottom: 0;
		font-size: 28rpx;
		color: #1b2120;
	}
}

.footer_box {
	width: 100%;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	bottom: 0;
	padding: 26rpx 40rpx;
	padding-bottom: calc(8rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(8rpx + env(safe-area-inset-bottom));
	background: #ffffff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 0.5px solid #e4e6e6;

	.footer_content {
		font-size: 24rpx;
		color: #1b2120;

		.footer_price {
			font-weight: bold;
			font-size: 32rpx;
		}

		.footer_fee {
			margin-top: 8rpx;
			color: #6363ff;
		}
	}

	.footer_button {
		width: 336rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
		border-radius: 62rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #ffffff;
	}
}

::v-deep .serviceCalender {
	.uni-calendar-item__weeks-box-circle {
		display: none;
	}

	.uni-calendar-item--checked {
		background-color: #ff6084;
	}

	.uni-calendar-item--isDay {
		background-color: #ff6084;
		color: #ffffff !important;
	}

	.uni-calendar-item--isDay-text {
		color: #ff6084;
	}
}

.value-added-service {
	background: linear-gradient(180deg, #fee9ee 0%, #ffffff 30%);
	border-radius: 24rpx;
	padding: 42rpx 0 42rpx 24rpx;
	margin-top: 24rpx;

	.service-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;

		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #1a1a1a;
		}

		.select-link {
			font-weight: 400;
			font-size: 28rpx;
			color: #7c807f;
			padding-right: 24rpx;
		}
	}

	.service-list {
		white-space: nowrap;

		.service-wapper {
			display: flex;
		}

		.service-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #f5f6f7;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-right: 8rpx;

			.service-image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-right: 16rpx;
			}

			.service-info {
				min-width: 180rpx;
				height: 96rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.service-name {
					font-weight: 500;
					font-size: 30rpx;
					color: #1b2120;
					white-space: nowrap;
				}

				.service-price {
					font-size: 26rpx;
					color: #5c5e5e;
				}
			}
		}
	}
}

.ordered-services {
	background: linear-gradient(180deg, #fee9ee 0%, #ffffff 100%);
	border-radius: 24rpx;
	padding: 42rpx 24rpx;
	margin-top: 24rpx;

	.ordered-services__header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 44rpx;

		.ordered-services__title {
			font-size: 28rpx;
			color: #1a1a1a;
			font-weight: bold;
		}

		.ordered-services__cancel {
			font-size: 30rpx;
			color: #7c807f;
		}
	}

	.ordered-services__list {
		.service-item {
			background: #f5f6f7;
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 16rpx;

			.service-main {
				display: flex;

				.service-image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 12rpx;
					margin-right: 8rpx;
				}

				.service-content {
					flex: 1;

					.service-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 24rpx;

						.service-name {
							font-weight: bold;
							font-size: 30rpx;
							color: #1b2120;
						}

						.total-price {
							font-weight: bold;
							font-size: 30rpx;
							color: #1b2120;
						}
					}

					.service-footer {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.service-price {
							font-size: 26rpx;
							color: #7c807f;
						}

						.service-count {
							font-size: 26rpx;
							color: #7c807f;
						}
					}
				}
			}

			.service-dates {
				background-color: #ffffff;
				font-size: 22rpx;
				color: #7c807f;
				padding: 8rpx 4rpx;
				border-radius: 8rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 20rpx;
				// display: flex;
				// align-items: center;

				.service-date {
					// display: inline-block;
					// padding-right: 8rpx;
					// border-right: 1rpx solid #e6e6e6;
					// margin-right: 8rpx;
					// white-space: nowrap;

					// &:last-child {
					// 	border-right: none;
					// }
				}
				.service-date-name,
				.service-date-date {
					white-space: nowrap;
				}

				.service-divider-line {
					display: inline-block;
					border-right: 1rpx solid #e6e6e6;
					margin: 0 8rpx;
					height: 22rpx;

					&:last-child {
						border-right: none;
					}
				}
			}
		}
	}

	.ordered-services__footer {
		text-align: center;
		font-size: 26rpx;
		color: #1b2120;
		padding: 16rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

::v-deep .uni-icons {
	line-height: 0 !important;
}

.waiter_box {
	.waiter_info {
		display: flex;
		align-items: center;
		.waiter_avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			margin-right: 8rpx;
		}
		.waiter_name {
			font-size: 30rpx;
			color: #1b2120;
		}
	}
	.waiter_tips {
		font-size: 24rpx;
		color: #6363ff;
		margin-top: 24rpx;
	}
}
</style>
